<template>
  <div class="tab-content">
    <div class="top-box">
      <div class="left">
      </div>
      <div class="right" v-if="active==1">
        <a-button style="margin-right:65px;color:#ff4d4f">要点销点告警(11)</a-button>
        <a-button style="margin-right:10px;">销点告警(11)</a-button>
      </div>
      <div class="right2" v-if="active==2">
        <a-button
          style="margin-left:79px;background-color:rgba(24, 144, 255, 1);color:rgba(255, 255, 255, 1);width:140px;height:30px;margin-top:18px"
        >监测项目</a-button>
        <a-button style="color:#1890ff;width:140px;height:30px;margin-top:18px">监护项目</a-button>
      </div>
    </div>

    <div class="content" style="margin-top:30px;">
      <div v-if="active==1">
        <a-table :columns="columns" :data-source="listData" :pagination="false">
          <template slot="operation">
            <a-tag color="#ff4d4f">未签到</a-tag>
          </template>
        </a-table>
      </div>
      <div v-if="active==2">
        <div>
          <a-table :columns="columns" :data-source="listData" :pagination="false">
            <template slot="operation">
              <a-tag color="#ff4d4f">未签到</a-tag>
            </template>
          </a-table>
        </div>
        <div class="tabend">
          <div class="title">现场情况:</div>
          <div class="icon-box">
            <div class="item">
              <img src="../../../assets/img/question.png" alt />
              <div>问题反馈</div>
            </div>
            <div class="item">
              <img src="../../../assets/img/yijian.png" alt />
              <div>巡视意见</div>
            </div>
            <div class="item">
              <img src="../../../assets/img/zoping.png" alt />
              <div>项目总评</div>
            </div>
            <div class="item">
              <img src="../../../assets/img/logo.png" alt />
              <div>项目进度</div>
            </div>
            <!-- <div class="item">
            <img src="../../../assets/img/logo.png" alt />
            <div>视频会议</div>
            </div>-->
            <div class="item">
              <img src="../../../assets/img/baobiao.png" alt />
              <div>上传报表</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {},
  data() {
    return {
      active: 2,
      columns: [
        {
          title: "员工编号", //标题
          ellipsis: true, //出现省略号
          dataIndex: "key",
          width: 100,
          key: "1",
        },
        {
          title: "项目成员",
          ellipsis: true, //出现省略号
          dataIndex: "name",
          key: "2",
        },
        {
          title: "所属项目",
          dataIndex: "address",
          ellipsis: true,
          key: "3",
        },
        {
          title: "要点时间",
          dataIndex: "address",
          ellipsis: true,
        },
        {
          title: "工作时间",
          dataIndex: "address",
          ellipsis: true,
          key: "4",
        },
        {
          title: "要点状态",
          dataIndex: "address",
          ellipsis: true,
          key: "5",
          scopedSlots: { customRender: "operation" },
        },
        {
          title: "工作地点",
          dataIndex: "address",
          ellipsis: true,
          key: "6",
        },
        {
          title: "要点站",
          dataIndex: "address",
          ellipsis: true,
          key: "7",
        },
      ],
      listData: [
        {
          key: "1",
          name: "John Brown",
          age: 32,
          address: "New York No. 1 Lake Park",
          tags: ["nice", "developer"],
        },
        {
          key: "2",
          name: "Jim Green",
          age: 42,
          address: "London No. 1 Lake Park",
          tags: ["loser"],
        },
        {
          key: "3",
          name: "Joe Black",
          age: 32,
          address: "Sidney No. 1 Lake Park",
          tags: ["cool", "teacher"],
        },
      ],
    };
  },
  components: {},
  created() {},
  methods: {
    callback(key) {
      // console.log(key);
      this.active = key;
    },
  },
};
</script>
<style lang="less" scoped>
@import "~@/assets/css/base.less";
.tab-content {
  background: #fff;
  .top-box {
    display: flex;
    margin-left: 43px;

    .right {
      margin-top: 12px;
      margin-left: 40px;
    }
  }
  .ant-table-wrapper {
    margin-bottom: 32px;
  }
}
/deep/ .ant-table-thead > tr > th {
  background: #dceaf6;
}
.tabend {
  height: 220px;
  .icon-box {
    display: flex;
    color: @c2;
    // padding:40px 80px 80px;
    margin-top: 48px;
    margin-left: 43px;
    .item {
      text-align: center;
      margin-right: 20px;
      cursor: pointer;
      margin-right: 50px;
      img {
        width: 60px;
        height: 60px;
        display: inline-block;
        margin-bottom: 10px;
      }
    }
  }
  .title {
    margin-top: 32px;
    padding-top: 32px;
    padding-left: 43px;
    display: block;
  }
}
</style>